(comment last updated: 2025-09-16 02:30:01)

All good points! I've addressed them. Two issues to address:

1. Should we call it Color mixer tool like the existing Color picker tool or call it Color mixer like Shape generator? Should we remove 'tool' word from Color picker tool as well?
2. @LeoMcA and @bsmth The pickr.es5.min.js works in local dev with Fred. Will it work on live Fred server, or should I host the file in shared assets repo? At the moment it is not working in PR preview.

1. Should we call it `Color mixer tool` like the existing `Color picker tool` or call it `Color mixer` like `Shape generator`? Should we remove 'tool' word from `Color picker tool` as well?

1. Let's remove the "tool" in "color picker tool".
2. Should we put the tools in alphabetical order in the left nav?
3. The color mixer should output the color in a few formats: the color-mix(in <color-space>, <color> <percent>, <colot> <percent>) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

Let's remove the "tool" in "color picker tool".

Done. Also updated slug and content references.

Should we put the tools in alphabetical order in the left nav?

Done. Also prposed updates in top navigation

The color mixer should output the color in a few formats: the color-mix(in , , ) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

This would require a third party library like Color.js and Chroma.js. Let's get the tool in first and then do enhancements in followup PRs.

The color mixer should output the color in a few formats: the color-mix(in , , ) format, and the output CSS color space itself if valid, such as #AAAAAA00 and rgb(123, 123, 123 / 0), etc., if srgb color space. That function can be pulled from the color picker.

This would require a third party library like Color.js and Chroma.js. Let's get the tool in first and then do enhancements in followup PRs.

I hand wrote the code for the color picker. In other words, it isn't too complex ;)
see https://github.com/mdn/css-examples/blob/main/modules/colors.html
Most color formats are srgb, so most are covered by that code.

Edit: I guess the issue is, as a tool, what is the output that people can use in their code? It's cool to see what the color value creates, but it's an "example" rather than a "tool" if there's nothing they can grab to use elsewhere.

This pull request has merge conflicts that must be resolved before it can be merged.

Edit: I guess the issue is, as a tool, what is the output that people can use in their code? It's cool to see what the color value creates, but it's an "example" rather than a "tool" if there's nothing they can grab to use elsewhere.

@estelle I see. Now the the output is shown in various color spaces and it is easily grabbable ✊